<!--
@Descripttion 分页
@version 1.0.0
@Author Bell
@Date 2021-10-04
@LastEditors Bell
@LastEditTime 2021-10-04
@ 使用
  引入组件
    import Pagination from '@/components/table/pagination'
  注册组件
    components: {
      Pagination
    }
  使用
    <Pagination @search="getList" :page="page" />
    @search Function 必填 查询函数
    page    Object   必填 分页对象
 -->
<template>
  <el-pagination
    class="fr"
    :current-page="page.pageNum"
    :total="page.total"
    @size-change="sizeChange"
    @current-change="numChange"
    :page-sizes="[5, 10, 20, 50]"
    :page-size="page.pageSize"
    layout="total, prev, pager, next, sizes"
    background
  >
  </el-pagination>
</template>
<script>
export default {
  props: {
    // 分页对象
    page: {
      required: true,
      type: Object
    }
  },
  methods: {
    /**
     * 分页 每页条数改变
     * @param {Number} _pageSize 条数
     */
    sizeChange (pageSize) {
      this.pageChange(1, pageSize)
    },
    /**
     * 分页 页数改变
     * @param {Number} pageNum 页码
     */
    numChange (pageNum) {
      this.pageChange(pageNum, this.page.pageSize)
    },
    /**
     * 分页 查询
     * @param {Number} pageNum 页码
     * @param {Number} pageSize 条数
     */
    pageChange (pageNum, pageSize) {
      this.page.pageSize = pageSize
      this.page.pageNum = pageNum
      this.$emit('search') // 更新数据
    }
  }
}
</script>
<style lang="scss" scoped>
// 隐藏最后一页按钮
/* .hide-trailer-page .el-pager .btn-quicknext + .number {
  display: none;
} */
.el-pagination /deep/{
  display: inline-block;
  padding: 20px 20px 0;
  .el-select .el-input {
    margin: 0px;
    width: 80px;
  }
  .el-pager .el-icon-more:before {
    content: "...";
  }
  .el-pagination__sizes {
    margin: 0 0 0 12px;
  }
  .el-pager li,
  .btn-next,
  .btn-prev {
    font-weight: normal;
    border-radius: 4px;
  }
}
</style>
